<template>
  <div class="swiper-container" :style="direction == 'top' || direction == 'bottom' ? {dispaly: 'flex', flexDirection: 'column'} : {}">
    <div class="swiper-item" :class="{animate: animateFlag}" v-for="(item, index) in listData" :key="index" :style="styleObj">
      <slot :item="item"/>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
        default: []
      },
      height: {
        type: String,
        default: '36px'
      },
      direction: {
        type: String,
        default: 'top'
      },
      interval: {
        type: String | Number,
        default: 1000
      }
    },
    data() {
      return {
        listData: [],
        animateFlag: false,
        timer: null
      }
    },
    computed: {
      styleObj() {
        let obj = {};
        switch (this.direction) {
          case 'top':
            obj = {
              'height': this.height,
              'line-height': this.height,
            }
            if(this.animateFlag) {
              obj.transform = `translateY(-${this.height})`
            }
            break;
          case 'bottom':
            obj = {
              'line-height': this.height,
              'height': this.height,
            }
            if(this.animateFlag) {
              obj.transform = `translateY(${this.height})`
            }
            break;
          case 'left':
            obj = {
              'height': '100%',
              'line-height': 1,
            }
            if(this.animateFlag) {
              obj.transform = `translateX(-100%)`
            }
            break;
          case 'right':
            obj = {
              'height': '100%',
              'line-height': 1,
            }
            if(this.animateFlag) {
              obj.transform = `translateX(100%)`
            }
            break;
          default:
            break;
        }
        return obj;
      }
    },
    mounted() {
      this.listData = this.list;
      this.timer = setInterval(this.animateFn, this.interval);
    },
    methods: {
      animateFn() {
        this.animateFlag = true;
        setTimeout(() => {
          if(this.direction == 'top') {
            this.listData.push(this.list[0]);
            this.listData.shift();
          } else if(this.direction == 'bottom') {
            this.listData.unshift(this.list[this.list.length - 1]);
            this.listData.pop();
          } else if(this.direction == 'left') {
            this.listData.push(this.list[0]);
            this.listData.shift();
          } else if(this.direction == 'right') {
            this.listData.unshift(this.list[this.list.length - 1]);
            this.listData.pop();
          }
          this.animateFlag = false;
        }, 500);
      }
    },
    destroyed() {
      clearInterval(this.timer);
    },
  }
</script>

<style lang="scss">
.swiper-container {
  width: 100%;
  height: 100%;
  display: flex;
  .swiper-item {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    align-items: center;
    &.animate {
      transition: all 0.5s ease-out;
    }
  }
}
</style>